import React from 'react';
import PropTypes from 'prop-types';
import {Card, Button, Row, Col, Table, Divider} from 'antd';
import {TABLE, DATE_FORMAT} from '../constants';
import {conventEnumValueToString, formatDateTime} from '../utils';
import {agentKind, dealerExtendAuthorisedMethod, dealerExtendOnlineStatus} from '../Enum';
import {hasPermissions} from './utils';
import {PERMISSION} from './constants';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import styles from './style.css';
import routes from './routes';
const {Description} = DescriptionList;

export class DetailPanel extends React.PureComponent {
    state = {
        loading: false,
    };
    componentDidMount() {
        this.props.init();
    }
    handleUpdateClick = () => {
        this.props.history.push(routes.update.format(this.props.id));
    }
    render() {
        const detailData = this.props.detail || {};
        const {options, dealers, personnels} = detailData;
        const {formatMessage} = this.props.intl;
        const operations = [];
        if(hasPermissions(this.props.permissions, PERMISSION.update) && hasPermissions(options, PERMISSION.update))
            operations.push(<Button key="update" onClick={this.handleUpdateClick} size="small">{
                formatMessage({
                    id: 'detailPanel.btn.edit',
                    defaultMessage: '编辑'
                })
            }</Button>);
        const dealerColumns = [{
            title: formatMessage({
                id: 'detailPanel.column.code',
                defaultMessage: '编号'
            }),
            dataIndex: 'code',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.name',
                defaultMessage: '名称'
            }),
            dataIndex: 'name',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.shortCode',
                defaultMessage: '简码'
            }),
            dataIndex: 'shortCode',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.shortName',
                defaultMessage: '简称'
            }),
            dataIndex: 'shortName',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.countryName',
                defaultMessage: '国家'
            }),
            dataIndex: 'countryName',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.provinceName',
                defaultMessage: '省份'
            }),
            dataIndex: 'provinceName',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.cityName',
                defaultMessage: '城市'
            }),
            dataIndex: 'cityName',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.address',
                defaultMessage: '地址'
            }),
            dataIndex: 'address',
        }];
        const personnelColumns = [{
            title: formatMessage({
                id: 'detailPanel.column.userName',
                defaultMessage: '编号'
            }),
            dataIndex: 'userName',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.personnelName',
                defaultMessage: '姓名'
            }),
            dataIndex: 'name',
        }];
        return (
            <div className="detail">
                <Card loading={this.state.loading}>
                    <DescriptionList size="large" title={<Row><Col span={12}>{
                        formatMessage({
                            id: 'detailPanel.card.title',
                            defaultMessage: '基础信息'
                        })
                    }</Col>
                    <Col className={`col-align-right ${styles.detail}`} span={12}>{operations}</Col>
                    </Row>}>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.code',
                            defaultMessage: '编号',
                        })}>{this.props.detail.code}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.name',
                            defaultMessage: '名称',
                        })}>{this.props.detail.name}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.shortCode',
                            defaultMessage: '简码',
                        })}>{this.props.detail.shortCode}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.shortName',
                            defaultMessage: '简称',
                        })}>{this.props.detail.shortName}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.kind',
                            defaultMessage: '客户分类',
                        })}>{conventEnumValueToString(agentKind, this.props.detail.kind)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.countryName',
                            defaultMessage: '国家',
                        })}>{this.props.detail.countryName}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.provinceName',
                            defaultMessage: '省份'
                        })}>{this.props.detail.provinceName}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.cityName',
                            defaultMessage: '城市'
                        })}>{this.props.detail.cityName}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.contactNumber',
                            defaultMessage: '联系电话'
                        })}>{this.props.detail.contactNumber}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.fax',
                            defaultMessage: '传真'
                        })}>{this.props.detail.fax}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.email',
                            defaultMessage: '电子邮箱'
                        })}>{this.props.detail.email}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.address',
                            defaultMessage: '联系地址'
                        })}>{this.props.detail.address}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.zipCode',
                            defaultMessage: '邮政编码'
                        })}>{this.props.detail.zipCode}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.groupVATNumber',
                            defaultMessage: '集团增值税编号'
                        })}>{this.props.detail.groupVATNumber}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.partsManager',
                            defaultMessage: '备件经理'
                        })}>{this.props.detail.partsManager}</Description>
                    </DescriptionList>
                    <Divider/>
                    <DescriptionList size="large" title={<Row><Col span={12}>{
                        formatMessage({
                            id: 'detailPanel.card.changeInformation',
                            defaultMessage: '扩展信息'
                        })
                    }</Col>
                    </Row>}>
                        <Description term={formatMessage({
                            id: 'detailPanel.operation.juridicalPerson',
                            defaultMessage: '法人'
                        })}>{this.props.detail.juridicalPerson}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.juridicalPersonPhone',
                            defaultMessage: '法人电话'
                        })}>{this.props.detail.juridicalPersonPhone}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.juridicalPersonEmail',
                            defaultMessage: '法人Email'
                        })}>{this.props.detail.juridicalPersonEmail}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.operation.generalManager',
                            defaultMessage: '总经理'
                        })}>{this.props.detail.generalManager}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.generalManagerPhone',
                            defaultMessage: '总经理电话'
                        })}>{this.props.detail.generalManagerPhone}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.generalManagerEmail',
                            defaultMessage: '总经理Email'
                        })}>{this.props.detail.generalManagerEmail}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.operation.salesDirector',
                            defaultMessage: '销售总监'
                        })}>{this.props.detail.salesDirector}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.salesDirectorPhone',
                            defaultMessage: '销售总监电话'
                        })}>{this.props.detail.salesDirectorPhone}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.salesDirectorEmail',
                            defaultMessage: '销售总监Email'
                        })}>{this.props.detail.salesDirectorEmail}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.operation.serviceDirector',
                            defaultMessage: '服务总监'
                        })}>{this.props.detail.serviceDirector}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.serviceDirectorPhone',
                            defaultMessage: '服务总监电话'
                        })}>{this.props.detail.serviceDirectorPhone}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.serviceDirectorEmail',
                            defaultMessage: '服务总监Email'
                        })}>{this.props.detail.serviceDirectorEmail}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.operation.marketDirector',
                            defaultMessage: '市场总监'
                        })}>{this.props.detail.marketDirector}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.marketDirectorPhone',
                            defaultMessage: '市场总监电话'
                        })}>{this.props.detail.marketDirectorPhone}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.marketDirectorEmail',
                            defaultMessage: '市场总监Email'
                        })}>{this.props.detail.marketDirectorEmail}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.operation.financialController',
                            defaultMessage: '财务总监'
                        })}>{this.props.detail.financialController}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.financialControllerPhone',
                            defaultMessage: '财务总监电话'
                        })}>{this.props.detail.financialControllerPhone}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.financialControllerEmail',
                            defaultMessage: '财务总监Email'
                        })}>{this.props.detail.financialControllerEmail}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.operation.salesInterfacePerson',
                            defaultMessage: '销售接口录入人'
                        })}>{this.props.detail.salesInterfacePerson}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.salesInterfacePhone',
                            defaultMessage: '销售接口录入人电话'
                        })}>{this.props.detail.salesInterfacePhone}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.salesInterfaceEmail',
                            defaultMessage: '销售接口录入人邮箱'
                        })}>{this.props.detail.salesInterfaceEmail}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.operation.serviceInterfacePerson',
                            defaultMessage: '服务接口录入人'
                        })}>{this.props.detail.serviceInterfacePerson}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.serviceInterfacePhone',
                            defaultMessage: '服务接口录入人电话'
                        })}>{this.props.detail.serviceInterfacePhone}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.serviceInterfaceEmail',
                            defaultMessage: '服务接口录入人邮箱'
                        })}>{this.props.detail.serviceInterfaceEmail}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.operation.incorporatedDate',
                            defaultMessage: '公司成立日期'
                        })}>{formatDateTime(this.props.detail.incorporatedDate, DATE_FORMAT)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.startTime',
                            defaultMessage: '授权经营奇瑞起始时时间'
                        })}>{formatDateTime(this.props.detail.startTime, DATE_FORMAT)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.authorisedMethod',
                            defaultMessage: '授权方式'
                        })}>{conventEnumValueToString(dealerExtendAuthorisedMethod, this.props.detail.authorisedMethod)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.operation.authorisedArea',
                            defaultMessage: '授权区域'
                        })}>{this.props.detail.authorisedArea}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.arrivedAddress',
                            defaultMessage: '收货港'
                        })}>{this.props.detail.arrivedAddress}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.openDate',
                            defaultMessage: '开业日期'
                        })}>{formatDateTime(this.props.detail.openDate, DATE_FORMAT)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.onlineStatus',
                            defaultMessage: '上线状态'
                        })}>{conventEnumValueToString(dealerExtendOnlineStatus, this.props.detail.onlineStatus)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.updatedDate',
                            defaultMessage: '更新日期'
                        })}>{formatDateTime(this.props.detail.updatedDate, DATE_FORMAT)}</Description>
                    </DescriptionList>
                </Card>
                <Card>
                    <DescriptionList title={formatMessage({
                        id: 'detailPanel.table.personnelDetails',
                        defaultMessage: '人员清单'
                    })}>
                        <Table
                            className="white-space-nowrap"
                            columns={personnelColumns}
                            rowKey="id"
                            pagination={false}
                            dataSource={personnels}
                            {...TABLE} />
                    </DescriptionList>
                </Card>
                <Card>
                    <DescriptionList title={formatMessage({
                        id: 'detailPanel.table.dealerDetails',
                        defaultMessage: '总代清单'
                    })}>
                        <Table
                            className="white-space-nowrap"
                            columns={dealerColumns}
                            rowKey="id"
                            pagination={false}
                            dataSource={dealers}
                            {...TABLE} />
                    </DescriptionList>
                </Card>
                <div className="page-toolbar">
                    <Button
                        type="primary"
                        disabled={this.state.loading}
                        onClick={this.props.onCancel}>{formatMessage({
                            id: 'detailPanel.btn.return',
                            defaultMessage: '返回'
                        })}</Button>
                </div>
            </div>
        );
    }
}

DetailPanel.propTypes = {
    detail: PropTypes.object.isRequired,
    id: PropTypes.string.isRequired,
    init: PropTypes.func.isRequired,
    loading: PropTypes.bool.isRequired,
    permissions: PropTypes.array.isRequired,
    onCancel: PropTypes.func.isRequired,
    history: PropTypes.object,
    intl: PropTypes.object,
    successReturn: PropTypes.func,
};

import {connect} from 'react-redux';
import {getDetail, tableSearch} from './actions';
import {injectIntl} from './intl';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);
const getDetailData = selectorFactory(['page', 'domainData', 'detail', 'data']);
const mapStateToProps = (state, props) => ({
    id: props.id,
    loading: state.getIn(['page', 'domainData', 'detail', 'isFetching']),
    permissions: getPermissions(state),
    detail: getDetailData(state),
});
const mapDispatchToProps = (dispatch, props) => ({
    init: () => dispatch(getDetail(props.id)),
    onCancel: () => {
        props.history.push(routes.query.url());
    },
    successReturn: () => {
        dispatch(tableSearch());
        props.history.push(routes.query.url());
    },
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(DetailPanel));
